<template>
  <div>
    <el-table class="label-list"
              :show-header="false"
              :data="listData"
              style="width: 100%">
      <el-table-column width="100">
        <template slot-scope="scope">
          <el-tag class="count">
            {{ scope.row.viewCount }} <br>浏览
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <h2 class="title">
            <nuxt-link :to="'/article/' + scope.row.id" target="_blank">
              {{ scope.row.title }}
            </nuxt-link>
          </h2>
          <div class="info">
            <i class="el-icon-user"></i>{{ scope.row.nickName }} &nbsp;
            <i class="el-icon-date"></i> {{ getDateFormat(scope.row.updateDate) }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <!-- current-change 事件是当前页码变动时候触发的事件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        prev-text=" 上一页 "
        next-text=" 下一页 "
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import {dateFormat} from '@/utils/date'

export default {
  props: {
    name: { // 标签页名字
      type: String,
      default: 'hot' // 默认热门
    },
    listData: { // 列表数据
      type: Array,
      default: () => {
        return [
          {id: '11', viewCount: 100, title: '热门头条配置动态的代理域名', nickName: ' 梦者1', updateDate: new Date()},
          {id: '12', viewCount: 80, title: '使用配置动态的代理域名', nickName: ' 梦者2', updateDate: new Date()}
        ]
      }
    },
    page: { // 分页对象
      type: Object,
      default: () => {
        return {
          size: 20,
          total: 1,
          current: 1
        }
      }
    }
  },

  methods: {

    handleSizeChange(size){
      // 触发父组件事件查询数据(父组件事件名，标签页名称, 当前页码)
      this.$emit('fetch-data', this.name, 1)
    },

    // 当页码改变后,被触发 , current 是最新的当前页码
    handleCurrentChange(current) {
      // 触发父组件事件查询数据(父组件事件名，标签页名称, 当前页码)
      this.$emit('fetch-data', this.name, current)
    },

    // 格式化日期
    getDateFormat(date) {
      return dateFormat(date)
    }

  }

}
</script>

<style scoped>
.label-breadcrumb {
  margin: 10px;
}

.label-tab {
  margin-top: 30px
}

.label-list .count {
  text-align: center;
  height: 100%;
  line-height: 20px;
}

.label-list .info {
  color: #999;
  font-size: 13px;
}

.label-list .title {
  display: inline-block;
  margin: 0 5px 0 0;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
}

a:hover {
  text-decoration-line: underline;
}

.el-row {
  margin-top: 30px;
}
</style>
